<template>
	<view class="container">

		<view class="bg-view">
			<view class="bg_box">
				<!-- 顶部状态栏 -->
				<view class="top-nav"
					:style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
					<view class="status_nav"
						:style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'"
						class="Index_tab_top">
						<view class="mine-txt">推广挣钱</view>
						<!-- <image src="../../static/jf/img9.png" mode="widthFix" class="img"></image> -->
					</view>
				</view>
				<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>

				<view class="title_one">
					<view class="title_top">
						<view class="view1">完成推广任务</view>
						<view class="view2">快速上手推广休闲吧，每天轻松赚钱花</view>
					</view>
				</view>

			</view>

			<image src="https://imgs.ynz666.com/test/2023/06/12/YzhjYTU5MzMyOGE0YzQ3YTcwYTE0NzdmOWQ5ZWYzZmE=.png"
				mode="widthFix" class="bg-image "></image>
		</view>

		<view class="main1">
			<view class="main1_box">
				<view class="main1_left">
					<view class="view1">
						邀好友加会员享免单
					</view>
					<view class="view2">
						赚取销售分佣更多金
					</view>
				</view>
				<view class="main1_right" @click="sharePoster(1)">
					去分享
				</view>
			</view>
			
			<view class="main1_box">
				<view class="main1_left">
					<view class="view1">
						分享超值团购聚划算
					</view>
					<view class="view2">
						赚取销售分佣更多金
					</view>
				</view>
				<view class="main1_right" @click="sharePoster(2)">
					去分享
				</view>
			</view>
		</view>

		<!-- <view class="share-mission">
			<view class="share-mission-title">
				<view>完成销客新手任务</view>
				<view>快速上手休闲吧销客，每天轻松赚钱花</view>
			</view>
			<view class="share-mission-list">
				<view class="share-mission-item">
					<view class="mission-left">
						<view class="share-no">1</view>
						<view class="share-content">
							<view>领取你的销售海报</view>
							<view>专属推手海报，销售数据、收益一目了然</view>
						</view>
					</view>
					<view class="share-btn" @click="sharePoster" >去领取</view>
				</view>
				<view class="share-progress"></view>
				<view class="share-mission-item">
					<view class="mission-left">
						<view class="share-no">1</view>
						<view class="share-content">
							<view>分享海报给目标用户，快速成单</view>
							<view>寻找更为合适的人群，赚取第一桶销售佣金</view>
						</view>
					</view>
					<view class="share-btn button-re">去分享<button open-type="share"></button></view>
				</view>
			</view>
		</view> -->
		<!-- banner -->
		<!-- <view class="index-banner">
			<swiper :indicator-dots="false" circular='true' :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(banner , bannerIndex) in adList" :key="bannerIndex" @click="PosterJumpPage(banner)">
					<image :src="banner.imgUrl" mode="aspectFill"></image>
					
				</swiper-item>
			</swiper>
		</view> -->


		<!-- 数据中心 -->
		<view class="date-center">
			<view class="date-title">数据中心</view>
			<view class="date-box">
				<view class="date_topBox">
           <view class="view1">
           	总销售额
           </view>
					 <view class="view2">
					 	{{saleDate.totalSaleAmount&&saleDate.totalSaleAmount/100}}
					 </view>
					 <view class="view3">
					 	昨日 {{saleDate.yesterdayTotalAmount&&saleDate.yesterdayTotalAmount/100}}
					 </view>
				</view>
				<view class="date_botBox">
					<view class="date-item">
						<view>今日邀请</view>
						<view>{{saleDate.todayInviteCount}}</view>
						<view>
							<text>昨日</text>
							<text>{{saleDate.yesterdayInviteCount}}</text>
						</view>
					</view>
					<view class="date-item">
						<view>今日销量</view>
						<view>{{saleDate.todaySaleCount}}</view>
						<view>
							<text>昨日</text>
							<text>{{saleDate.yesterdaySaleCount}}</text>
						</view>
					</view>
					<view class="date-item">
						<view>今日售卡金额</view>
						<view>{{saleDate.todaySaleCardAmount&&saleDate.todaySaleCardAmount/100}}</view>
						<view>
							<text>昨日</text>
							<text>{{saleDate.yesterdaySaleCardAmount&&saleDate.yesterdaySaleCardAmount/100}}</text>
						</view>
					</view>
					<view class="date-item">
						<view>今日团购金额</view>
						<view>{{saleDate.todayGroupBuyAmount&&saleDate.todayGroupBuyAmount/100}}</view>
						<view>
							<text>昨日</text>
							<text>{{saleDate.yesterdayGroupBuyAmount&&saleDate.yesterdayGroupBuyAmount/100}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		
		
		<view class="detail">
			<view class="date-title">
				<view class="left">
					收益明细
				</view>
				<view class="right" v-if="total_count>3" @click="jumpPage">
					查看全部 >
				</view>
			</view>
			
			<view class="bottom">
				<view class="item" v-for="(item,index) in saleDetails" :key="index">
					<view class="item_left">
						<view class="view1">
							{{item.name}}
						</view>
						<view class="view2">
							{{item.createTime}}
						</view>
					</view>
					<view class="item_right">
						{{item.amout&&item.amout/100}}
					</view>
				</view>
				<view class="item_kong" v-if="isLastPage">
					当前暂无明细～
				</view>
			</view>
		</view>
		
		
		
		<!-- 客服 -->
		<view class="kefu" @click="WeixinServer">遇到问题，联系客服</view>

		<!-- 活动海报分享 -->
		<painter :palette="template" @imgOK="onImgOK" :widthPixels='1200'
			style='width:;height: ;position: absolute; left: -9999rpx;' />
		<!-- 活动海报分享 -->
		<view class="mask" v-if="showPoster" @click="closeMask">
			<image class="poster" :src="imagePath" mode="widthFix"></image>
			<view v-if="imagePath" @tap.stop="saveImg" class="down-box"
				:style="'padding-bottom:'+(bottomTabbar>0?bottomTabbar:30)+'px;'">
				<image src="../../static/poster-save.png" mode="aspectFill"></image>
				<view>保存到相册</view>
			</view>
		</view>

	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import painter from '@/wxcomponents/painter/painter';
	export default {

		components: {
			customTabbar,
			painter,
		},
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},
				adList: [
					'../../static/lazy_detail.png', '../../static/lazy_detail.png', '../../static/lazy_detail.png'
				],
				showPoster: false,
				template: {},
				saleDate: {},
				codeimg: '',//分享码
				codeimgOne:'',
				codeimgTow:'',
				imagePath: '',
				saleId: '',
				
				saleDetails:[],//收益明细
				total_count:0,
			};
		},

		onLoad() {
			// this.GetAdList();
			this.QrcodeMed();
			this.QrcodeMedTow();
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onShow() {
			this.mineInfo = uni.getStorageSync('mineInfo');
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.SaleDate();
			this.SaleDetails();
		},
		onShareAppMessage(res) {
			if (res.from = 'button') {
				return {
					title: '邀请你一起吃喝玩乐免单',
					imageUrl: this.imagePath, //../../static/shareGoods.png
					path: '/pages/index/index?scene=' + encodeURIComponent('sId=' + this.saleId)
				}
			}
		},
		methods: {
			jumpPage() {
				uni.navigateTo({
					url: `/pageC/earnings/earnings`
				});
			},
			// 返回按钮
			tapToBack(page) {
				// console.log(1)
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '../index/index'
						})
						break;
					case 'back':
						// console.log(2)
						uni.navigateBack({
							delta: 1,
							fail() {
								uni.switchTab({
									url: '../index/index'
								})
							}
						})
						break;
				}
			},
			// 销售数据
			SaleDate() {
				let that = this;
				http.post('/api/platform/v1/sale/data').then(sale => {
					that.saleDate = sale.data
				})
			},
			// 销售数据
			SaleDetails() {
				let that = this;
				http.post('/api/platform/v1/sale/details',{
					page:1,
					pageSize:3
				}).then(sale => {
					that.saleDetails=sale.data.data
					that.total_count=sale.data.total_count
				})
			},
			// 广告列表
			GetAdList() {
				let that = this;
				let local = that.latitude + "," + that.longitude;
				http.post('/api/platform/v1/banners/sale', {
					location: 'sale',
				}).then(ad => {
					that.adList = ad.data;
					that.loading = false;
				}).catch(error => {
					console.error(error)
				});
			},

			PosterJumpPage(poster) {
				let that = this;
				switch (poster.sourceType) {
					case 3:
						poster.sourceUrl = poster.sourceUrl == 'https://p.ynz666.com/purchase/index.html#/home/index' ?
							poster.sourceUrl + '?token=' + uni.getStorageSync('accessToken') + '&buyVipLevel=' + that
							.mineInfo.buyVipLevel + '&loacl=' + local : poster.sourceUrl;
						uni.setStorageSync('webUrl', poster.sourceUrl);
						that.$navTo.navigateTo({
							id: 'Home-banner-html',
							url: '/pages/agreement/agreement',
							type: [6]
						})
						break;
					case 9:
						let local = this.latitude + "," + this.longitude;
						let weburl = 'https://p.xiuxian.xialoukeji.com/purchase/index.html#/map/index?token=' + uni
							.getStorageSync('accessToken') + '&local=' + local + '&region=' + this.city;
						uni.setStorageSync('webUrl', weburl);
						this.$navTo.navigateTo({
							id: 'Home-map',
							url: '/pages/agreement/agreement'
						})
						break;
					default:
						switch (poster.sourceUrl) {
							case "/pages/index/index":
							case "/pages/mine/mine":
							case "/pages/activityCenter/activityCenter":
								uni.switchTab({
									url: poster.sourceUrl
								})
								break;
							case "/pages/activityDetail/activityDetail":
								that.$navTo.navigateTo({
									id: 'Home-banner-activity',
									url: poster.sourceUrl + '?activityId=' + poster.sourceId,
									type: [3]
								})
								break;
							case "/pages/storeDetail/storeDetail":
								that.$navTo.navigateTo({
									id: 'Home-banner-merchant',
									url: poster.sourceUrl + '?store_id=' + poster.sourceId,
									type: [2]
								})
								break;
							case "/pages/invite/invite":
								that.$navTo.navigateTo({
									id: 'Home-banner-intive',
									url: poster.sourceUrl,
									type: [5]
								})
								break;
							case "/pages/register/register":
								if (this.mineInfo.isInner && this.mineInfo.vip_level <= 0) {
									that.$navTo.navigateTo({
										id: 'Home-see',
										// url:poster.sourceUrl,
										url: '/pages/register/register',
										type: [4]
									})
								} else {
									that.$navTo.navigateTo({
										id: 'Home-see',
										// url:poster.sourceUrl,
										url: '/pages/memberCenter/memberCenter',
										type: [4]
									})
								}
								break;
							case "/pages/groupDetail/groupDetail":
								uni.navigateTo({
									url: poster.sourceUrl + '?id=' + poster.sourceId
								})
								break;
							default:
								uni.navigateTo({
									url: poster.sourceUrl
								})
								break;
						}
						break;
				}
			},
			// 生成小程序码
			QrcodeMed() {
				let that = this;
				http.post('/api/platform/v1/sale/info').then(info => {
					if (info.data.saleId) {
						that.saleId = info.data.saleId;
						let data = {
							path: 'pageB/purchase/purchase',
							width: 150,
							isHyaline: false,
							type: 1,//1售卡码  2团购列表码   8销售首页码
							scene: `sId=${info.data.saleId}`,
							sourceId: '0'
						}
						http.post('/api/user/v1/qrCode', data).then(code => {
							let qrUrl = 'https://imgs.ynz666.com/' + code.data.qrCodeUrl
							that.codeimgOne = qrUrl;
							// that.handleStartDrawImg();
						})
					}
				}).catch(error => {})
			},
			// 生成小程序码
			QrcodeMedTow() {
				let that = this;
				http.post('/api/platform/v1/sale/info').then(info => {
					if (info.data.saleId) {
						that.saleId = info.data.saleId;
						let data = {
							path: 'pageB/groupList/groupList',
							width: 150,
							isHyaline: false,
							type: 2,
							scene: `sId=${info.data.saleId}`,
							sourceId: '0'
						}
						http.post('/api/user/v1/qrCode', data).then(code => {
							let qrUrl = 'https://imgs.ynz666.com/' + code.data.qrCodeUrl
							that.codeimgTow = qrUrl;
							// that.handleStartDrawImg();
						})
					}
				}).catch(error => {})
			},
			// 接入微信客服
			WeixinServer() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},

			// 分享海报
			sharePoster(type) {
				if(type==1){
					this.codeimg = this.codeimgOne;
				}else{
					this.codeimg = this.codeimgTow;
				}
				this.handleStartDrawImg();
				
				this.showPoster = true;
			},
			closeMask() {
				this.showPoster = false;
			},
			// 保存到相册
			saveImg() {
				let that = this;
				app.photosAblum(function() {
					uni.saveImageToPhotosAlbum({
						filePath: that.imagePath,
						success(down) {
							uni.hideLoading();
							that.showPoster = false;
							uni.showToast({
								title: '图片保存成功',
								icon: 'none'
							})
						}
					})
				})
			},

			// 分享到微信
			shareImg() {
				console.log('点击分享微信')
				let that = this;
				uni.showShareImageMenu({
					path: that.imagePath,
				})
			},
			handleStartDrawImg() {
				this.template = {
					// width: '600px',
					// height: '800px',
					width: '500px',
					height: '400px',
					background: "#fff",
					borderRadius: '40px',
					views: [
						// {
						// 	type: 'image',
						// 	url: '../../static/poster.png',
						// 	mode: 'aspectFit',
						// 	css: {
						// 		top: '0px',
						// 		left: '0px',
						// 		width: '600px',
						// 		height: '800px',
						// 		borderRadius: '24px',
						// 	}
						// },
						{
							type: 'image',
							url: this.codeimg,
							mode: 'aspectFit',
							css: {
								top: '50px',
								left: '100px',
								width: '300px',
								height: '300px',
								borderRadius: '50px',
								// bottom: '89px',
								// right: '32px',
								// width: '182px',
								// height: '182px',
								// borderRadius: '50px',
							}
						},
					]
				};
			},
			onImgOK(e) {
				console.log(e,"eee")
				this.imagePath = e.detail.path;
			},
			onImgErr(e) {},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.container {}

	.left-button-box {
		// width: 160rpx;
		// background-color: rgba(255, 255, 255, 0.5);
		// border-radius: 40rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		// margin-left: 30rpx;
		// border: 1rpx solid rgba(224, 224, 224, 0.6);
		position: absolute;
		left: 30rpx;
		z-index: 7;

		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.top-nav {
		// background: linear-gradient(180deg, #F77539 0%,rgba(0,0,0,0) 100%);
		position: relative;
		z-index: 5;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// 	// position: absolute;top: 0;left: 0;
		// 	z-index: -1;
		// }
		// .img{
		// 	width: 188rpx;
		// 	height: 36rpx;
		// }
	}

	.title_one {
		margin: 0 20rpx;
padding-top: 40rpx;
		.title_top {
			margin: 0 25rpx;

			.view1 {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-shadow: 1rpx 3rpx 4rpx #E33C03;
			}

			.view2 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 0.8;
				margin-top: 4rpx;
			}
		}
	}

	/* 背景 */
	.bg-view {
		width: 100vw;
		height: 431rpx;

		.bg_box {
			height: 431rpx;
			// background: linear-gradient(180deg, #F77539 0%, #FEFDFB 100%);
		}

		.bg-image {
			z-index: -1;
			display: block;
			width: 100%;
			height: 431rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.status_nav {
		width: 100vw;
	}

	.Index_tab_top {
		font-size: 38rpx;
		font-weight: 500;
		color: #141414;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		.scan-box {
			margin-left: 30rpx;
			width: 160rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 28rpx;
			border: 1rpx solid #FA6400;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.mine-txt {
			color: #fff;
			font-size: 32rpx;
		}
	}

	.share-mission {
		background-color: #fff;
		padding: 20rpx 20rpx 115rpx 20rpx;
	}

	.share-mission-title {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}

	.share-mission-list {
		padding: 20rpx 0;
	}

	.share-mission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mission-left {
			display: flex;
			align-items: center;
		}

		.share-no {
			width: 46rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 50%;
			background: #FF4D4F;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
		}

		.share-content {
			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 4rpx;
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}

		.share-btn {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF4D4F;
			font-size: 22rpx;
			font-weight: bold;
			color: #FF4D4F;
			text-align: center;
		}

		.button-re {
			position: relative;

			button {
				width: 100rpx;
				height: 48rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				border: 1rpx solid red;
			}
		}
	}

	.share-progress {
		width: 1rpx;
		height: 50rpx;
		background-color: #efefef;
		margin-left: 24rpx;
	}

	// banner广告
	.index-banner {
		width: 710rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -85rpx;
		border-radius: 12rpx;
		position: relative;

		swiper,
		swiper-item {
			width: 710rpx;
			height: 180rpx;
		}

		image {
			width: 710rpx;
			height: 180rpx;
			display: block;
			border-radius: 12rpx;
		}
	}


	.main1 {
		margin: -66rpx 20rpx 32rpx;
		// height: 138rpx;
		

		.main1_box {
			padding: 30rpx 27rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 20rpx;
			.main1_left {
				.view1 {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #F53F00;
				}

				.view2 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 8rpx;
				}
			}

			.main1_right {
				width: 120rpx;
				height: 56rpx;
				background: #F43B00;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.main1_box:nth-child(1){
			margin-bottom: 20rpx;
		}
	}


	// 数据中心
	.date-center {
		margin: 30rpx 0 56rpx 0;
		padding: 0 20rpx;
	}

	.date-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.date-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 48rpx;
	}
	.date_topBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.view1{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.view2{
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F43B00;
			margin: 8rpx 0;
		}
		.view3{
			min-width: 116rpx;
			height: 40rpx;
			background: #F4F4F4;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.date_botBox{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.date-item {

		view:nth-child(1),
		view:nth-child(3) {
			font-size: 24rpx;
			color: #868A93;
		}

		view:nth-child(2) {
			font-size: 44rpx;
			font-weight: bold;
			color: #141414;
			line-height: 62rpx;
		}

		view:nth-child(3) {
			color: #8C8C8C;
		}
	}
	
	.detail{
		margin: 0rpx 0 56rpx 0;
		padding: 0 20rpx;
		.date-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.left{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			.right{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.bottom{
			width: 100%;
			margin-top: 32rpx;
			.item{
				padding: 0 25rpx;
				height: 110rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.item_left{
					.view1{
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					.view2{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 8rpx;
					}
				}
				.item_right{
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			.item_kong {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				padding: 20rpx 0 30rpx;
			}
		}
	}

	.kefu {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		text-decoration: underline;
		padding-bottom: 100rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;

		.poster {
			width: 650rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -325rpx;
		}

		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;

			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
</style>
